import React from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import Ionicons from "react-native-vector-icons/Ionicons"
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Home from '../home';
import User from '../user'


const Tab = createBottomTabNavigator();

function Tabbar(): React.JSX.Element {
    return (
        <>
            <Tab.Navigator 
                screenOptions={({route}) => ({
                    tabBarIcon: ({ focused, color, size }) => {
                        let iconName
                        if (route.name === 'Home') {
                            iconName= focused? 'home':'home-outline'
                        } else if (route.name === 'User') {
                            iconName= focused? 'person':'person-outline'
                        }
                        return <Ionicons name={iconName} size={size} color={color}/>
                    },
                    tabBarLabel: ({ focused, color }) => {
                        const textStyle = {
                            color: color,  // 如果未传入color，则默认为黑色
                            fontSize: 10,     // 如果未传入size，则默认字体大小为16
                          };
                        let iconName = ''
                        
                        if (route.name === 'Home') {
                            iconName= '首页'
                        } else if (route.name === 'User') {
                            iconName= "我的"
                        }
                        return <Text style={textStyle}>{iconName}</Text>
                    }
                })}
            >
                <Tab.Screen name="Home" component={Home} />
                <Tab.Screen name="User" component={User} />
            </Tab.Navigator>
        </>
    );
}

const styles = StyleSheet.create({

});

export default Tabbar;
// { headerShown: false },
//                     tabBarIcon: ({ focused, color, size }) => {
//                         let iconName
//                         if (route.name === 'Home') {
//                             iconName= "首页"
//                         } else if (route.name === 'User') {
//                             iconName= "我的"
//                         }
//                         return <Ionicons name={'add-circle'} size={size} color={color}/>
//                     }